<template>
  <div class="feedback-info">
    <el-row v-if="fieldIsEdit('problemTitle') === '1'" type="flex" justify="center" style="margin: 10px;">
      <el-button type="primary" size="small" @click="addIssue">新增</el-button>
      <el-button type="primary" size="small" @click="delIssue">删除</el-button>
    </el-row>
    <div v-for="(item, index) in issueList" :key="index">
      <div class="jdf-sub-title">
         <el-checkbox v-model="item.checked">调研发现问题反馈（{{ encodeS(index + 1) }}）</el-checkbox>
      </div>
      <jdf-increased-form
        ref="issueForm"
        :configs="configs"
        :data="item"
        :formAttrs="formAttrs"
        :all-fields-readonly="allFieldsReadonly"
        :rules="rules"
        :readonlyFields="readonlyFields"
        @selectIdOrOrg="selectIdOrOrg"
      ></jdf-increased-form>
    </div>

    <!-- 调研工作安排单条信息详情 -->
     <el-dialog :visible.sync="visible" title="详情">
      <div v-for="(item, key) in detailFields" :key="key" style="display: flex;padding: 8px; border-bottom: 1px solid #eee;">
        <div style="width: 200px; font-weight: bold;">{{ item }}</div>
        <div>{{ detailInfo[key] }}</div>
      </div>
     </el-dialog>
  </div>
</template>

<script>
import { DEPT_GROUP_SELECT_CONFIG } from '@/utils/common-form-field';

const nzhcn = require('nzh/cn');

export default {
  name: 'FeedbackInfo',
  props: {
    formData: {
      type: Object,
      default: () => ({}),
    },
    fieldIsEdit: {
      type: Function,
      default: () => '0',
    },
  },
  data() {
    return {
      encodeS: nzhcn.encodeS,
      fields: {
        checked: false,
        problemTitle: '',
        problemDescribe: '',
        departmentName: '',
        departmentFeedback: '',
      },
      visible: false,
      detailInfo: {},
      detailFields: {
        leadingUserName: '带队领导',
        researchStartDate: '调研开始日期',
        researchEndDate: '调研结束日期',
        leadingDepartmentName: '牵头部门',
        normativeType: '连带规范性动作类型',
        researchUnitName: '调研对象',
        researchSubject: '调研主题',
        researchType: '调研类型',
        grassrootsContactName: '调研区县',
        researchMethod: '乡镇/网络',
        researchLevel: '调研层级',
        researchForm: '调研形式',
        researchContactName: '调研组联络人',
        conductResearchContactName: '被调研单位联络人',
        researchEntourageName: '调研组陪同人员',
        conductResearchEntourageName: '被调研单位陪同人员',
      },
      issueList: [],
      allFieldsReadonly: false,
      rules: {
        problemTitle: [{ required: true, message: '请输入问题标题', trigger: ['blur'] }],
        problemDescribe: [{ required: true, message: '请输入问题描述', trigger: ['blur'] }],
        departmentName: [{ required: true, message: '请选择主办部门', trigger: ['change'] }],
        departmentFeedback: [{ required: true, message: '请输入主办部门反馈', trigger: ['blur'] }],
      },
      formAttrs: {
        'show-message': false,
        'hide-required-asterisk': false,
      },
      // 只读字段list
      readonlyFields: ['departmentName'],
    };
  },
  watch: {
    'formData.problems': {
      handler(val) {
        this.issueList = val || [{ ...this.fields }];
      },
      immediate: true,
    },
    issueList: {
      handler(val) {
        this.$emit('change-v', val);
      },
      deep: true,
    },
  },
  computed: {
    configs() {
      return [
        [
          {
            formElCode: 'problemTitle',
            formElName: '问题标题',
            editable: this.fieldIsEdit('problemTitle'),
            attrs: {
              maxlength: '50',
              'show-word-limit': true,
            },
          },
        ],
        [
          {
            formElCode: 'problemDescribe',
            formElName: '问题描述',
            editable: this.fieldIsEdit('problemDescribe'),
            attrs: {
              maxlength: '4000',
              'show-word-limit': true,
              type: 'textarea',
              row: 1,
            },
          },
        ],
        [{
          ...DEPT_GROUP_SELECT_CONFIG,
          editable: this.fieldIsEdit('departmentName'),
        }],
        [
          {
            formElCode: 'departmentFeedback',
            formElName: '主办部门反馈',
            editable: this.fieldIsEdit('departmentFeedback'),
            attrs: {
              type: 'textarea',
              row: 3,
            },
          },
        ],
      ];
    },
  },
  methods: {
    addIssue() {
      this.issueList.push({ ...this.fields });
    },
    delIssue() {
      this.issueList = this.issueList.filter((item) => !item.checked);
      this.issueList.forEach((item) => { item.checked = false; });
    },
    /**
     * 对所有动态表单执行校验
     */
    customValidate() {
      const formInstances = this.$refs.issueForm;
      return Array.isArray(formInstances) && formInstances.length > 0
      && Promise.all(formInstances.map((form) => form.validateBusinessForm()));
    },
    /**
     * 选人/组织确定事件
     */
    selectIdOrOrg({ clickField, datas, formData }) {
      switch (clickField) {
        case 'departmentName':
          formData.departmentCode = formData.departmentNameIds;
          break;
        default:
          break;
      }
    },
    /**
     * 打开详情窗口
     */
    openDetail(row) {
      this.visible = true;
      this.detailInfo = row;
    },
  },
};
</script>

<style scoped lang="scss">
.feedback-info {
  width: 100%;
  .jdf-sub-title {
    width: 100%;
    text-align: center;
    line-height: 36px;
    background-color: #f2f6fc;
    font-weight: bold;
    font-size: 15px;
}
}

</style>
